<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.组件的嵌套使用</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<Weather></Weather>
			<Hello></Hello>
		</div>

		<script type="text/javascript" >
			//定义一个Weather组件
			const Weather = Vue.extend({
				template:`
					<div>
						<h1>今天天气很{{isHot ? '炎热' : '凉爽'}}</h1>
						<button @click="changeWeather">点我切换天气</button>
					</div>
				`,
				data(){
					return {
						isHot:true
					}
				},
				methods:{
					changeWeather(){
						this.isHot = !this.isHot
					}
				}
			})

			//定义一个Student组件
			const Student = Vue.extend({
				template:`<h1>学生姓名：{{stuName}}</h1>`,
				data(){
					return {
						stuName:'小刘'
					}
				}
			})

			//定义一个Hello组件
			const Hello = Vue.extend({
				template:`
					<div>
						<h1>Hello,{{sname}}</h1>
						<Student/>
					</div>
				`,
				data(){
					return {
						sname:'尚硅谷'
					}
				},
				components:{
					Student
				}
			})

			//创建一个vm，用于管理所有的组件
			new Vue({
				el:'#root',
				components:{ //注册组件
					Weather,
					Hello
				}
			})
		</script>
	</body>
</html>